<div class="container-fluid">
  <div class="row-fluid">
    <div class="span5">
      <form ng-submit="saveStateName()">
        <h3>
          <span class="oppia-editable-name"
                ng-hide="activeInputData.name == 'stateName'"
                ng-click="initializeNewActiveInput('stateName')">
            <[stateName]>
          </span>
          <span ng-show="activeInputData.name == 'stateName'">
            <input type="text" ng-model="stateName">
            <input type="submit" value="Save">
          </span>
        </h3>
      </form>
    </div>
  </div>
</div>

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span10">
      <div id="editorWindow" ng-show="stateId">

        <h4>
          Parameter Changes
          <img class="oppia-help" src="/images/help.png"
               ui-jq="tooltip"
               title="This allows you to change any parameters associated with a reader who enters this state. A parameter can be accessed by typing {{'{{parameter_name}}'}} in the widget customization, rule definition or feedback fields.">
        </h4>

        {% include 'editor/parameter_change.html' %}

        <br>

        <h4>
          Non-Interactive Content
          <img class="oppia-help" src="/images/help.png"
               ui-jq="tooltip"
               title="You can add non-interactive content here. It will be displayed to the reader before he/she is asked to provide input.">
        </h4>
        <div>
          <ul ng-model="content" class="oppia-state-text-list">
            <li ng-repeat="item in content" class="oppia-state-text-item" ng-class="'item-' + $index">

              <span class="pull-right">
                <span ng-show="item.type == 'text'">
                  <a ng-show="activeInputData.name == 'content.' + $index" ng-click="saveContent($index)">Save</a>
                  <a ng-hide="activeInputData.name == 'content.' + $index" ng-click="editContent($index)">Edit</a>
                  |
                </span>
                <span ng-show="$index != 0">
                  <a ng-click="swapContent($index, $index - 1)"> ⇑ </a> |
                </span>
                <span ng-show="$index < content.length - 1">
                  <a ng-click="swapContent($index, $index + 1)"> ⇓ </a> |
                </span>
                <a ng-click="deleteContent($index)">Delete</a>
              </span>

              <ng-switch on="item.type">

                <div ng-switch-when="text">
                  <div ng-show="activeInputData.name == 'content.' + $index">
                    <!-- The display of this element is controlled manually, outside Angular JS. -->
                    <div class="yui-skin-sam">
                      <textarea name="yuiEditor<[$index]>" id="yuiEditor<[$index]>" cols="50" rows="10">
                        <[content[$index]]>
                      </textarea>
                    </div>
                    <button ng-click="saveContent($index)">Save</button>
                  </div>

                  <div ng-hide="activeInputData.name == 'content.' + $index">
                    <span ng-show="item.value == ''" class="oppia-placeholder">
                      Click 'Edit' to enter text here.
                    </span>
                    <span ng-bind-html="item.value"></span>
                  </div>
                </div>

                <div ng-switch-when="image">
                  <ng-switch on="item.value == ''">
                    <div ng-switch-when="true" class="oppia-placeholder">
                      <form id="newImageForm">
                        Upload an image:
                        <input type="file" id="newImage" name="newImage" image-upload="true">
                        <button type="button" ng-click="saveStateContentImage($index)">Save</button>
                      </form>
                      <span class="oppia-loading" id="uploadImageLoading"></span>
                    </div>
                    <div ng-switch-default>
                      <img class="oppia-small-image" ng-src="/imagehandler/<[item.value]>"></img>
                      <span ng-click="deleteImage($index)" class="oppia-thumbnail">&times;</span>
                    </div>
                  </ng-switch>
                </div>

                <div ng-switch-when="video">
                  <ng-switch on="item.value == ''">
                    <div ng-switch-when="true" class="oppia-placeholder">
                      <form novalidate name="addVideoContent" ng-submit="hideVideoInputDialog(newVideoLink, $index)">
                        Add a Youtube video link:
                        <input type="text" ng-model="newVideoLink" id="newVideoLink" required>
                        <input type="submit" value="Save" ng-disabled="addVideoContent.$invalid">
                      </form>
                    </div>
                    <div ng-switch-default>
                      <iframe width="100" height="56" src="https://www.youtube.com/embed/<[item.value]>?rel=0"
                              frameborder="0" allowfullscreen></iframe>
                      <span ng-click="deleteVideo($index)" class="oppia-thumbnail">&times;</span>
                    </div>
                  </ng-switch>
                </div>

                <div ng-switch-when="widget">
                  <div ng-show="item.value == ''">
                    <iframe ng-src="/widgetrepository?iframed=true&interactive=false&parent_index=<[$index]>" width="100%" height="400px" frameborder="0"></iframe>
                  </div>

                  <div ng-hide="item.value == ''">
                    <button type="button" ng-click="deleteWidget($index)">Change widget</button>
                    <span ng-show="hasCustomizableParams(item.value)">
                      <a href="#" ng-click="customizeWidget($index)" data-toggle="modal" data-target="#customizeNonInteractiveWidgetModal">
                        Customize
                      </a>
                    </span>
                    <iframe id="widgetPreview<[$index]>" width="100%" frameborder="0"></iframe>
                  </div>
                </div>

              </ng-switch>
            </li>
          </ul>

          <center class="oppia-add-content-box">
            <button ng-click="addContent('text')">Add rich text</button>
            <button ng-click="addContent('image')">Add image</button>
            <button ng-click="addContent('video')">Add video</button>
            <button ng-click="addContent('widget')">Add widget</button>
          </center>

          <br>
          <br>
        </div>

        <br>
      </div>
      {% include 'editor/views/interactive_widget_preview.html' %}
    </div>
  </div>

  <div class="modal hide fade" id="customizeNonInteractiveWidgetModal">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
        &times;
      </button>
      <h3 id="customizeWidgetModalLabel">Customize This Widget</h3>
    </div>
    <div class="modal-body">
      <div ng-repeat="(key, val) in customizationParams">
        <span ng-show="isArray(val)">
          <[key]>: <list items="val"></list>
        </span>
        <span ng-hide="isArray(val)">
          <[key]>: <string item="customizationParams[key]">
        </span>
      </div>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn" data-dismiss="modal" ng-click="saveNonInteractiveWidgetParams()">Save</button>
    </div>
  </div>

</div>
